<template>
  <div class="app-container">
      <!-- 搜索栏 -->
      <el-form @submit.native.prevent :model="queryParams" :inline="true" v-show="showSearch">
          <el-form-item label="访问页面">
              <el-input @keyup.enter="handleQuery" v-model="queryParams.keyword" style="width: 200px"
                  placeholder="请输入访问页面" clearable />
          </el-form-item>
          <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <el-row :gutter="10" class="mb15">
          <el-col :span="1.5">
              <el-button type="danger" plain :disabled="logIdList.length === 0" icon="Delete"
                  @click="handleDelete(undefined)">批量删除</el-button>
          </el-col>
           <RightToolBar @changeShow="changeShowSearch" :showSearch="showSearch" @queryTable="getList"></RightToolBar>
      </el-row>
      <!-- 表格展示 -->
      <el-table border :data="logList" @selection-change="handleSelectionChange" v-loading="loading">
          <!-- 表格列 -->
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <!-- 访问页面 -->
          <el-table-column prop="page" label="访问页面" align="center" width="130"></el-table-column>
          <!-- 访问ip -->
          <el-table-column prop="ipAddress" label="访问ip" align="center" width="150"></el-table-column>
          <!-- ip来源 -->
          <el-table-column prop="ipSource" label="ip来源" align="center" width="200"></el-table-column>
          <!-- 操作系统 -->
          <el-table-column prop="os" label="操作系统" align="center" width="180"></el-table-column>
          <!-- 浏览器 -->
          <el-table-column prop="browser" label="浏览器" align="center"></el-table-column>
          <!-- 操作日期 -->
          <el-table-column prop="createTime" label="访问时间" align="center" width="200">
              <template #default="scope">
                  <div class="create-time">
                      <el-icon>
                          <clock />
                      </el-icon>
                      <span style="margin-left: 10px">{{ formattedDate(scope.row.createTime) }}</span>
                  </div>
              </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                  <el-button type="danger" class="el-icon-delete" size="mini" plain @click="handleDelete(scope.row.id)">
                      删除
                  </el-button>
              </template>
          </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination v-if="count > 0" :total="count" v-model:page="queryParams.current" v-model:limit="queryParams.size"
          @pagination="getList" />
  </div>
</template>

<script>
import {getVisitList, deleteVisitLog} from '@/api/log'
import { formatDate } from "@/utils/date";
export default {
  data() {
    return {
      count: 0,
      showSearch: true,
      loading: false,
      queryParams: {
          current: 1,
          size: 10,
      },
      logIdList: [],
      logList: [],
    }
  },
  methods:{
    handleDelete(id){         
      if(id == undefined){
        if(this.logIdList.length == 0){
          this.$message({type: 'warning', message: '请选择要删除的数据'})
          return;
        }
        this.$confirm('是否删除选中的数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteVisitLog(this.logIdList).then((data)=>{
            if(data.code == 200){
              this.$message({type: 'success', message: '删除成功'})
              this.getList();
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'})
        });
      }
      else{
        this.logIdList = [id];
        this.$confirm('是否删除该数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteVisitLog(this.logIdList).then((data)=>{
            if(data.code == 200){
              this.$message({type: 'success', message: '删除成功'})
              this.getList();
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'})
        });
      }
    },
    handleQuery(){
      this.getList();
    },
    getList(){
      this.loading = true;
      getVisitList(this.queryParams).then((res) => {
        if(res.code == 200)
        {
        this.loading = false;
        this.logList = res.data.recordList;
        this.count = res.data.count;
        }
      });
    },
    handleSelectionChange(selectedItems) {
     this.logIdList = selectedItems.map((item) => item.id);
    },
    queryTable(){},
    handleView(){},
    formattedDate(date) {
      return formatDate(date);
    },
    changeShowSearch(data){
      this.showSearch = data;
    },
  },
  mounted() {
    this.getList();
  },
}
</script>

<style>

</style>